<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8">
		<title>查看信息</title>
		<link rel="stylesheet" type="text/css" href="../layui/css/layui.css"/>
		<link rel="stylesheet" href="../css/public.css"/>
		<style type="text/css">
		.not_border_left {
			border-left: none !important;
		}
		.selectInfo-con{
			padding: 0 15px 15px 15px;
			margin-bottom: 30px;
		}
		.selectInfo-con .articletype dl dd.layui-this{
			background-color: #1E9FFF !important;
		}
		.selectInfo-con .layui-table-view{
			border: none;
		}
		.selectInfo-con .layui-table-view .layui-table[lay-skin=line]{
			border: 0;
		}
		.selectInfo-con .layui-table-box{
			margin-top: 10px;
		}
		.selectInfo-con .layui-table-body table tbody .layui-table-hover{
			background: #fffdd3 !important;
		}
		.selectInfo-con .layui-table-body table tbody .layui-table-click{
			background: #fdef9b !important;
		}
		.selectInfo-con .layui-table, .layui-table-view{
			margin-top: 0px;
		}
		/* 信息查看弹窗 */
		.infoDetlayer-con{
			display: none;
			padding: 10px;
			margin-bottom: 20px;
		}
		.infoDetlayer-con .infoDetlayer-title{
			padding-top: 10px;
		    margin-bottom: 10px;
			background-color: #FBFBFB;
		    box-shadow: inset 0 0 10px #CCC;
			-moz-box-shadow: inset 0 0 10px #CCC;
		    -webkit-box-shadow: inset 0 0 10px #CCC;
		}
		.infoDetlayer-con .infoDetlayer-title p{
			font-size: 22px;
			font-weight: bold;
			text-align: center;
			color: rgb(82,82,82);
		}
		.infoDetlayer-con .infoDetlayer-title ul{
			float: right;
			font-size: 15px;
			margin-right: 20px;
			margin-bottom: 10px;
		}
		.infoDetlayer-con .infoDetlayer-title ul li{
			float: left;
			margin-left: 10px;
			list-style: none;
		}
		.infoDetlayer-con .infoDetlayer-title .enclosure{
			clear: both;
			height: 45px;
			line-height: 45px;
			padding: 0px 15px;
			border-top: 1px solid #E6E6E6;
			border-bottom: 1px solid #E6E6E6;
		}
		.infoDetlayer-con .infoDetlayer-wrap{
			overflow-y: auto;
			padding: 5px;
			/* background-color: #f2f2f2; */
			box-shadow: inset 0 0 10px #CCC;
			-moz-box-shadow: inset 0 0 10px #CCC;
		    -webkit-box-shadow: inset 0 0 10px #CCC;
			
		}
		.infoDetlayer-con .infoDetlayer-wrap .main-content{
			padding-bottom: 20px;
			background-color: white;
		}
		.infoDetlayer-con .infoDetlayer-wrap .main-content text{
			height: auto !important;
			border: none;
		}
		.infoDetlayer-con .infoDetlayer-wrap .main-content .comment a{
			width: 98%;
			height: 30px;
			display: block;
			margin-top: 50px;
			padding-left: 2%;
			line-height: 30px;
			background-color: #f2f2f2;
		}
		.infoDetlayer-con .infoDetlayer-wrap .main-content .comment div{
			margin-left: 10px;
			padding: 10px 0px;
			border-bottom: 1px solid #EEEEEE;
		}
		.infoDetlayer-con .infoDetlayer-wrap .main-content .comment div ul li{
			float: left;
			padding: 10px;
			font-size: 17px;
			list-style: none;
			margin-left: 10px;
			margin-right: 30px;
		}
		.infoDetlayer-con .infoDetlayer-wrap .main-content .comment div p{
			clear: both;
			margin-left: 20px;
		}
		</style>
	</head>
	<body>
		<div class="selectInfo-con">
			<!-- 弹窗内容开始 -->
			<div class="infoDetlayer-con" id="infoDetlayer-con">
				<div class="infoDetlayer-title">
					<p><span id="layertopic"></span></p>
			      	<ul>
			      		<li>发布人：</li>
			      		<li><span id="layerauthor"></span></li>
			      		<li style="margin-left: 30px;">发布时间：</li>
			      		<li><span id="layerpushTime"></span></li>
			      	</ul>
			      	<div class="enclosure">
			      		<h5>文章类型:  <a id="layerinfotype" style="margin-left:8px" href="javascript:"></a></h5>
			      	</div>
				</div>
				<div class="infoDetlayer-wrap">
			      	<div class="main-content">
					    <text name="infoContent" id="infoContent" placeholder="请输入内容" class="layui-textarea"></text>
			      		<div class="comment" id="review">
			      		</div>
			      	</div>
			    </div>
			</div>
			<!-- 弹窗内容结束 -->
			
			<blockquote class="layui-elem-quote not_border_left">
				<div class="layui-inline"> 	
					<form class="layui-form" action="">
				  	<div class="layui-input-inline articletype">
					    <select name="infoType" id="infoType" lay-filter="infoType" lay-event="role">
					        <option value="00">请选择信息类型</option>					        
					    </select>
					</div>
					<div class="layui-input-inline">
						<input type="text" name="infotitle" id="infotitle" placeholder="请输入信息标题" class="layui-input" autocomplete="off">
				   </div>
				   <div class="layui-inline">
		     	   		<button id="btnselfrontinfo" type="button" class="layui-btn layui-bg-blue" lay-event="seleBtn">查询</button>
				   </div>
				   </form>
				</div>
			</blockquote>
			
			<table class="layui-hide" id="tabissendfrontinfo" lay-filter="tabissendfrontinfo" ></table>
			
			<!--表格操作列-->
			<script type="text/html" id="barDemo">
				<a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="select">查看</a>
				<a class="layui-btn layui-btn-xs layui-bg-red" lay-event="delete">撤销</a>
			</script>
			
			<!-- 类型判断  -->
			<script type="text/html" id="infoTypeText">
				<span id="{{ d.id }}">{{ d.type == '1001' ? '通知' : (d.type == '1002' ? '新闻' : '文章') }}</span>
			</script>
			
			<script type="text/html" id="powerbar">
				<span> {{ d.ishotarticle==true ? '是'  : '不是'}}</span>
			</script>
		</div>
		<script src="../js/jquery-3.3.1.js"></script>
		<script src="../layui/layui.js"></script>
		<script type="text/javascript">
		layui.use(['table','form'], function() {
			var table = layui.table,
			form = layui.form;
			
			/* 加载文章类型 */
			$.ajax({
				url: '../informationmanagement/getallinfotype',  
		        type: 'get', 
		        dataType: 'json',  
		        success: function (getdata) {
		          if (getdata.code == 0) { 
		        	  var str="";
		        	  for(var i=0;i<getdata.count;i++){
		        		  str+="<option value='" + getdata.data[i].typeid + "'>"+ getdata.data[i].typename +"</option>";
		        	  }
		        	  $("#infoType").append(str);
		        	  form.render("select");
		          }else {}  
		        },
		        error:function(){ }
	    	});
			
			
			table.render({
				elem: '#tabissendfrontinfo',
				id:'frontinfoid',
				url: '../informationmanagement/getissendfrontinfo',
				title: '后台已发信息表',
				height:"full-125",
				skin: 'line',
				even: true,
				cols: [
					[{
						type:'numbers',
						title:'序号',
						align:"center"
					},
					 {
						field: 'title',
						title: '标题',
						align: "center"
					},{
						field: 'typename',
						title: '信息类型',
						align: "center"
					}, {
						field: 'author',
						title: '发布人',
						align: "center"
					},{
						field: 'ishotarticle',
						title: '是否是热点文章',
						templet : '#powerbar',
						align: "center"
					},  {
						field: 'createtime',
						title: '创建时间',
						align: "center"
					},{
						title: '操作',
						toolbar: '#barDemo',
						align: "center"
					}]
				], page: {
					layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
					groups: 5,
					limit: 10,
					theme: '#1E9FFF',						
				}
			});

			/* 已发信息查看 */
			$("#btnselfrontinfo").click(function(){
				var typeid=$("#infoType").val();
				var title=$("#infotitle").val();
				if(typeid==00){
					typeid="";
				}
				table.render({
					elem: '#tabissendfrontinfo',
					id:'frontinfoid',
					url: '../informationmanagement/getissendfrontinfo?typeid='+typeid+'&title='+title,
					title: '后台已发信息表',
					height:"full-125",
					skin: 'line',
					even: true,
					cols: [
						[{
							type:'numbers',
							title:'序号',
							align:"center"
						},
						 {
							field: 'title',
							title: '标题',
							align: "center"
						},{
							field: 'typename',
							title: '信息类型',
							align: "center"
						}, {
							field: 'author',
							title: '发布人',
							align: "center"
						},{
							field: 'ishotarticle',
							title: '是否是热点文章',
							templet : '#powerbar',
							align: "center"
						},  {
							field: 'createtime',
							title: '创建时间',
							align: "center"
						},{
							title: '操作',
							toolbar: '#barDemo',
							align: "center"
						}]
					], page: {
						layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
						groups: 5,
						limit: 10,
						theme: '#1E9FFF',						
					}
				});
			});
			
			//点击表格右侧查询按钮
		    table.on('tool(tabissendfrontinfo)', function(obj){
			    var infodata = obj.data;
			    /* 点击查看 */
			    if(obj.event === 'select'){
			    	$("#layertopic").text(infodata.title);
			    	$("#layerauthor").text(infodata.author);
			    	$("#layerpushTime").text(infodata.createtime);
			    	$("#layerinfotype").html(infodata.typename);
			    	$("#infoContent").html(infodata.infocontent);
			    	var index = layer.open({
				        type: 1, 
				        title: '信息详情',
				        area: ['800px', '95%'],
				        shade: 0.8,
				        content: $('#infoDetlayer-con'),
				        maxmin: true,
				    });
				    layer.full(index);
			    }
			    /* 点击撤销 */
			    if(obj.event === 'delete'){
					layer.confirm('确定要撤销吗？', {
					  btn: ['确定','取消'] //按钮
					}, function(){
						$.ajax({
							type : 'get',
							url : '../informationmanagement/delwaitsendfrontinfo?infoid=' + infodata.infoid,
							datatype : 'json',
							success : function(data) {
								if (data.code == 10001) {
									layer.alert(data.msg, {icon: 1});
									table.reload("frontinfoid", { //此处是上文提到的 初始化标识id
						                where: {
						                	keyword:data.code=='10001'
						                }
						            });	
								}
								else{
									layer.alert(data.msg, {icon: 2});
								}
							}
						});
					}, function(){});
			    }
		    });
		});
		</script>
	</body>
</html>
